<script lang="ts" setup name="ToothCoordinates">
import {reactive, ref, watch} from 'vue'
import SelectTeethModal from './selectTeethModal.vue'
const props = defineProps({
  disabled: {
    type: Boolean,
    required: true,
    defult: false
  },
  // 牙齿数据
  toothDataStr: {
    type: String,
    required: true,
    defult: ''
  }
})

const emit = defineEmits(['setToothData'])

// 弹窗标题
const dialogTitle = ref<string>('')
// 弹窗显示
const showDialog = ref<boolean>(false)

// 一方牙齿数据
const toothValue = reactive<{value: string; position: number}>({value: '', position: 0})

// 四方牙齿数据
const toothData = ref<Array<string>>(['00000000', '00000000', '00000000', '00000000'])

/**
 * @description: 选择牙齿
 * @return {*}
 */
const toothBtn = (position: number) => {
  switch (position) {
  case 0:
    dialogTitle.value = '选择缺齿-左上'
    break
  case 1:
    dialogTitle.value = '选择缺齿-右上'
    break
  case 2:
    dialogTitle.value = '选择缺齿-左下'
    break
  case 3:
    dialogTitle.value = '选择缺齿-右下'
    break
  }
  toothValue.value = toothData.value[position] // 一方牙齿参数
  toothValue.position = position // 牙齿方位
  showDialog.value = true
}

/**
 * @description: 保存牙齿数据
 * @param {*} data // 01字符串
 * @return {*}
 */
const switchTooth = (data: string) => {
  toothData.value[toothValue.position] = data
  showDialog.value = false
  emit('setToothData', toothData.value)
}

// 监听后端值的变化
watch(
  () => props.toothDataStr,
  () => {
    toothData.value = props.toothDataStr.split('|')
  }
)
</script>
<template>
  <div class="tooth-coordinates d-common-flex-col">
    <el-row :gutter="7">
      <el-col :span="12">
        <el-button :disabled="props.disabled" @click="toothBtn(0)">
          {{ toothData[0] === '00000000' ? '' : toothData[0] }}
        </el-button>
      </el-col>
      <el-col :span="12">
        <el-button :disabled="props.disabled" @click="toothBtn(1)">
          {{ toothData[1] === '00000000' ? '' : toothData[1] }}
        </el-button>
      </el-col>
      <el-col :span="12">
        <el-button :disabled="props.disabled" @click="toothBtn(2)">
          {{ toothData[2] === '00000000' ? '' : toothData[2] }}
        </el-button>
      </el-col>
      <el-col :span="12">
        <el-button :disabled="props.disabled" @click="toothBtn(3)">
          {{ toothData[3] === '00000000' ? '' : toothData[3] }}
        </el-button>
      </el-col>
    </el-row>
  </div>
  <select-teeth-modal v-if="showDialog" :dialog-title="dialogTitle" :show-dialog="showDialog" :tooth-value="toothValue.value" @close="showDialog = false" @switch-tooth="switchTooth" />
</template>
<style lang="less" scoped>
.tooth-coordinates {
  margin-left: 10px;
  width: 175px;
  .el-button {
    width: 80px;
    height: 32px;
    &.is-disabled {
      background: #eeeeee;
    }
  }
  .el-col {
    padding: 4px;
    &:nth-child(1) {
      border-right: 1px solid rgba(112, 112, 112, 0.3);
      border-bottom: 1px solid rgba(112, 112, 112, 0.3);
    }
    &:nth-child(2) {
      border-bottom: 1px solid rgba(112, 112, 112, 0.3);
    }
    &:nth-child(3) {
      border-right: 1px solid rgba(112, 112, 112, 0.3);
    }
  }
}
</style>
